<template>
  <el-aside width="auto">
    <el-menu
      class="main_menu"
      active-text-color="#fff"
      background-color="#464c5b"
      :default-active="mainMenuActive"
      text-color="#ccc"
    >
      <el-menu-item
        :index="item.path"
        v-for="(item, i) in menuList"
        :key="i"
        @click="handleMainMenu(item)"
      >
        <el-icon>
          <document v-if="item.meta.icon === 'document'" />
          <Menu v-if="item.meta.icon === 'Menu'" />
          <Histogram v-if="item.meta.icon === 'Histogram'" />
          <setting v-if="item.meta.icon === 'setting'" />
        </el-icon>
        <span> {{ item.meta.title }}</span>
      </el-menu-item>
    </el-menu>
    <el-menu
      class="sub_menu"
      v-if="subMenuList?.length > 0"
      :default-active="activePath"
      active-text-color="#1abc9ccc"
      background-color="#eaedf1"
    >
      <template v-for="(item, i) in subMenuList" :key="i">
        <el-menu-item-group :title="item.meta.title">
          <el-menu-item
            @click="goPath(subItem)"
            v-if="item.children?.length > 0"
            v-for="subItem in item.children"
            :key="subItem.name"
            :index="subItem.path"
          >
            <span class="point">·</span>{{ subItem.meta.title }}
          </el-menu-item>
          <el-menu-item v-else :index="item.path" @click="goPath(item)">
            <span class="point">·</span><span>{{ item.meta.title }}</span>
          </el-menu-item>
        </el-menu-item-group>
      </template>
    </el-menu>
  </el-aside>
</template>
<script lang="ts" setup>
import store from '@/store'
const route = useRoute()
const router = useRouter()
const subMenuList = ref([])
const mainMenuActive = computed(() => {
  const path = '/' + route.path.split('/')[1]
  return path
})
const activePath = computed(() => {
  return route.path
})
const menuList = computed(() => {
  return store.getters.menuList
})
watch(route, (val) => {
  setSubMenuList(val)
})
const setSubMenuList = (route) => {
  const name = route.name
  if (name) {
    store.commit('menus/SET_ACTIVEMENU', route)
    if (
      subMenuList.value?.length === 0 ||
      name.indexOf(subMenuList.value?.[0].name) === -1
    ) {
      const find = menuList.value.find((e) => name.indexOf(e.name) > -1)
      subMenuList.value = find?.children
    }
  }
}
const goPath = (item) => {
  router.push({
    path: item.path,
  })
}
const handleMainMenu = (item) => {
  subMenuList.value = item.children
  router.push({
    path: item.path,
  })
}
onMounted(() => {
  setSubMenuList(route)
})
</script>
<style lang="scss" scoped>
.el-aside {
  display: flex;

  .main_menu,
  .sub_menu {
    height: 100%;

    .el-menu-item {
      font-size: 12px;
    }
  }

  .main_menu {
    width: 70px;

    .el-menu-item {
      @include flex-center;
      padding: 30px 0 !important;
      flex-direction: column;
      line-height: normal;
      box-sizing: border-box;

      .el-icon {
        margin-bottom: 6px;
      }
    }

    .is-active {
      text-shadow: 0 0 8px #fff;
    }
  }

  :deep(.sub_menu) {
    width: 140px;

    .el-menu-item-group__title {
      height: 50px;
      line-height: 50px;
      box-sizing: border-box;
      background-color: #f2f2f2;
      border-bottom: 1px #e4e4e4 solid;
      font-size: 13px;
      padding: {
        top: 0;
      }
    }

    .el-menu-item {
      height: 40px;
      line-height: 40px;

      &:hover {
        color: $primary-color;
        background-color: #eaedf1;
      }
    }

    .is-active {
      background-color: #fff;
      font-weight: 600;
    }
  }
}
.point {
  margin-right: 2px;
  font-weight: bold;
}
</style>
